/** @format */

import { useEffect } from "react";

/**
 * useScaleFullScreen
 * 让内容区根据窗口大小自动等比例缩放并居中，适用于大屏项目
 * @param {React.RefObject} ref - 需要缩放的内容区ref
 */
export default function useScaleFullScreen(ref) {
  useEffect(() => {
    // 定义缩放函数，每次窗口变化时调用
    function setScale() {
      const baseWidth = 1920; // 设计稿宽度(px)
      const baseHeight = 1080; // 设计稿高度(px)
      const scaleX = window.innerWidth / baseWidth; // 横向缩放比例
      const scaleY = window.innerHeight / baseHeight; // 纵向缩放比例
      const scale = Math.min(scaleX, scaleY); // 取较小的比例，保证内容全部可见且等比例缩放 // 设置transform缩放和居中定位
      if (ref.current) {
        // 判断ref已绑定到DOM
        ref.current.style.transform = `scale(${scale})`; // 设置缩放 // 计算内容区居中时的left/top偏移
        ref.current.style.left = `${
          (window.innerWidth - baseWidth * scale) / 2
        }px`; // 居中水平偏移
        ref.current.style.top = `${
          (window.innerHeight - baseHeight * scale) / 2
        }px`; // 居中垂直偏移
      }
    }
    setScale(); // 首次渲染时立即缩放一次
    window.addEventListener("resize", setScale); // 监听窗口变化，实时缩放 // 组件卸载时移除监听，防止内存泄漏
    return () => window.removeEventListener("resize", setScale);
  }, [ref]); // 依赖ref变化
}
